import React, {useEffect} from 'react';
import {Form, Input, InputNumber, message, Modal, Radio, Select, Space, Button} from "antd";
import {Upload, WangEditor} from '../../../components/Index'
import {post} from "../../../service";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";

function ModalForm(props) {
    const [form] =Form.useForm()
    const layout = {
        labelCol: {span: 4},
        wrapperCol: {span: 20}
    }
    useEffect(() => {
        form.setFieldsValue(props.data)
        return () => {
        };
    }, []);

    const onSave = (values) => {
        console.log(values)
        if (props.title === "新增") {
            post('/api/product/add', {...values, attrs: JSON.stringify(values.attrs)}).then(res => {
                message.success('添加成功')
                onCancel()
                props.refreshList()
            })
        }
        post('/api/product/update', {...values, attrs: JSON.stringify(values.attrs), id: props.data.id}).then(res => {
            message.success('编辑成功')
            onCancel()
            props.refreshList()
        })
    }
    const onCancel = () => {
        props.dispatch({
            type: 'hideModalForm'
        })
    }
    const onSaveSubmit = () => {
        form.submit()
    }
    const onMainPicChange = (value) => {
        form.setFieldsValue({mainPic: value})
    }
    const onMorePicChange = (value) => {
        form.setFieldsValue({morePic: value})
    }
    const onDescChange=(html)=>{
        form.setFieldsValue({descs: html})
    }
    const readonly = props.title == '详情' ? true : false
    const {data} = props
    return (
        <Modal visible width={600} title={props.title} onOk={onSaveSubmit} onCancel={onCancel}
               className={readonly ? 'm-readonly-modal' : ''}>
            <Form {...layout} form={form} onFinish={onSave}>
                <Form.Item label="商品名称" name='name' rules={[{required: true, message: '请输入商品名称'}]}>
                    <Input/>
                </Form.Item>
                <Form.Item label={'所属类型'} name='type' rules={[{required: true, message: '请选择所属类型'}]}>
                    <Select style={{width: 200}}>
                        <Select.Option value="0">图书</Select.Option>
                        <Select.Option value="1">服装</Select.Option>
                        <Select.Option value="2">电器</Select.Option>
                        <Select.Option value="3">家具</Select.Option>
                        <Select.Option value='4'>数码</Select.Option>
                        <Select.Option value='5'>食品</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="属性" required>
                    <Form.List
                        name="attrs"
                        rules={[{required: true, message: '请输入属性'}]}
                    >
                        {(fields, {add, remove}, {errors}) => (
                            <>
                                {fields.map(({name}) => (
                                    <Space key={name} align="baseline">
                                        <Form.Item
                                            name={[name, 'key']}
                                            rules={[{required: true, message: '不能为空'}]}
                                        >
                                            <Input placeholder="颜色/大小/版本"/>
                                        </Form.Item>
                                        <Form.Item
                                            name={[name, 'value']}
                                            rules={[{required: true, message: '不能为空'}]}
                                        >
                                            <Input placeholder="属性名"/>
                                        </Form.Item>
                                        <MinusCircleOutlined onClick={() => remove(name)}/>
                                    </Space>
                                ))}
                                <Form.Item>
                                    <Button
                                        type="dashed"
                                        block
                                        icon={<PlusOutlined/>}
                                        onClick={() => add()}
                                    >
                                        添加属性
                                    </Button>
                                </Form.Item>
                                <Form.ErrorList errors={errors}/>
                            </>
                        )}
                    </Form.List>
                </Form.Item>
                <Form.Item label={'商品主图'} name='mainPic'>
                    <Upload defaultFileList={data.mainPic ? data.mainPic.split(',') : []} onChange={onMainPicChange}/>
                </Form.Item>
                <Form.Item label={'商品详情图'} name='morePic'>
                    <Upload maxConunt={5} defaultFileList={data.morePic ? data.morePic.split(',') : []}
                            onChange={onMorePicChange}/>
                </Form.Item>
                <Form.Item label='上架' name='isOnShelf' rules={[{required: true, message: '请选择是否上架'}]}>
                    <Radio.Group>
                        <Radio value={1}>是</Radio>
                        <Radio value={0}>否</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label={'价格'} name='price' rules={[{
                    validator: (rule, value) => {
                        if (form.getFieldValue('isOnShelf') == 1 && !value) {
                            return Promise.reject('请输入价格')
                        }
                        return Promise.resolve()
                    }
                }]}>
                    <InputNumber/>
                </Form.Item>
                <Form.Item label='商品详请' name='descs' rules={[{required: true}]}>
                    {readonly?<div dangerouslySetInnerHTML={{__html:data.descs}}></div>:<WangEditor onChange={onDescChange} defaultValue={data.descs}/>}
                </Form.Item>
            </Form>
        </Modal>
    );
}

export default ModalForm;
